<template>
  <div id="app">
    <el-container class="layout-container">
      <el-header v-if="showHeader" class="header">
        <AppHeader />
      </el-header>
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue'

const route = useRoute()

// 某些页面不显示头部（如登录页）
const showHeader = computed(() => {
  const hiddenHeaderRoutes = ['/login', '/register']
  return !hiddenHeaderRoutes.includes(route.path)
})
</script>

<style scoped>
.layout-container {
  min-height: 100vh;
}

.header {
  background-color: #409eff;
  color: white;
  padding: 0;
}

.main-content {
  padding: 20px;
  background-color: #f5f5f5;
}
</style>